
<template>
  <!-- 油罐实时监测 -->
  <div v-if="loaded" id="swiper-par" class="oil-monitor-wrap">
    <Swiper ref="mySwiper" :options="swiperOption">
      <SwiperSlide v-for="(val,index) in oilData" :key="index">
        <div class="dis-cen slide-wrap" :data_index="index">
          <div>
            <h3 class="oil-type-name">{{ val.oilTank.oilTypeName }}</h3>
            <div class="oil-animation">
              <div class="dis-cen oil-chart-wrap">
                <div
                  :class="{'wave-progress':true,'wave-progress-yellow':val.oilTank.oilTypeName.indexOf('柴油')!=-1}"
                >
                  <div class="inner">
                    <div class="water" :style="{'top':val.animationTop+'%'}" />
                    <div class="tips">{{ val.deviceName }}</div>
                  </div>
                </div>
              </div>
              <div class="oil-info">
                <p>
                  <span>额定容量：</span>
                  <span>{{ val.oilTank.ratedCapacity }}L</span>
                </p>
                <p>
                  <span>现有容量：</span>
                  <span>{{ val.oilTank.existingCapacity }}L</span>
                </p>
                <p>
                  <span>剩余空间：</span>
                  <span>{{ val.oilTank.residualCapacity }}L</span>
                </p>
                <h6 :class="{'oil-alarm':val.animationTop>75}">正常</h6>
              </div>
            </div>
          </div>
        </div>
      </SwiperSlide>

      <!-- <div slot="pagination" class="swiper-pagination" /> -->
      <div slot="button-prev" class="swiper-button-prev" />
      <div slot="button-next" class="swiper-button-next" />
    </Swiper>
  </div>
</template>

<script>
import { queryAllByPage } from '@/api/deviceInfo'
import 'swiper/css/swiper.css'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'OilMonitor',
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      loaded: false,
      swiperOption: {
        // pagination: {
        //   el: ".swiper-pagination",
        //   // 允许点击小圆点跳转
        //   clickable: true
        // },
        // autoplay: {
        //   delay: 3000,
        //   // 手动切换之后继续自动轮播
        //   disableOnInteraction: false
        // },
        loop: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        breakpoints: {
          1280: {
            slidesPerView: 3,
            spaceBetween: 10
          },
          768: {
            slidesPerView: 3,
            spaceBetween: 10
          },
          320: {
            slidesPerView: 3,
            spaceBetween: 10
          }
        }
      },
      oilData: []
    }
  },
  created() {
    queryAllByPage({
      deviceType: 1,
      pageNum: -1
    }).then(res => {
      const oilTypeArr = this.$store.state.device.oil_type
      this.oilData = res.data.map(v => {
        v.animationTop =
          (v.oilTank.residualCapacity / v.oilTank.ratedCapacity).toFixed(2) *
          100
        for (const oili in oilTypeArr) {
          if (oilTypeArr[oili].id == v.oilTank.oilType) {
            v.oilTank.oilTypeName = oilTypeArr[oili].enumCvalue
            break
          }
        }
        return v
      })
      const oilLen = this.oilData.length
      if (oilLen < 3) {
        for (const si in this.swiperOption.breakpoints) {
          this.swiperOption.breakpoints[si].slidesPerView = oilLen
        }
      }
      this.loaded = true
      const This = this
      this.$nextTick(() => {
        const dom = document.getElementsByClassName('slide-wrap')
        for (let i = 0; i < dom.length; i++) {
          dom[i].onclick = function(e) {
            This.goOilInfo(this.getAttribute('data_index'))
          }
        }
      })
    })
  },
  mounted() {},
  methods: {
    goOilInfo(v) {
      this.$bus.emit('drawerDialog', {
        component: 'OilTankInfo',
        componentdata: this.oilData[v]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/com.scss";
.oil-chart-wrap {
  @-webkit-keyframes spin {
    from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes spin {
    from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  .wave-progress {
    width: 200px;
    height: 200px;
    border: 8px solid rgba(206, 49, 49, 0.3);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(130, 39, 39, 0.4);
    box-sizing: border-box;
    position: relative;
  }

  .wave-progress .inner {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    box-sizing: border-box;
    z-index: 10;
  }
  .wave-progress .inner .water {
    position: absolute;
    width: 200%;
    height: 200%;
    left: -50%;
    border-radius: 40%;
    background: rgba(222, 56, 44, 0.58);
    -webkit-animation: spin 10s linear infinite;
    animation: spin 10s linear infinite;
  }
  .wave-progress-yellow {
    box-shadow: 0 0 20px #fbff0091;
    border: 8px solid #dcf3198a;
    background: none;
    .inner {
      border: none;
      .water {
        background: rgba(238, 241, 9, 0.658);
      }
    }
  }
  .tips {
    color: #fd6b65;
    font-size: 28px;
    line-height: 184px;
    text-align: center;
  }
}
.slide-wrap {
  padding: 40px 0;
  cursor: pointer;
  .oil-type-name {
    text-align: center;
    color: #fff;
  }
  .oil-info {
    margin: 15px 0;
    text-align: center;
    font-size: 16px;
    color: #fff;
    p,
    h6 {
      padding: 8px 0;
      margin: 0;
    }
    h6 {
      font-size: 16px;
    }
    .oil-alarm {
      color: red;
    }
  }
}
</style>
